<template>
  <div id="notice">
    <c-title :hide="false" :text="title"></c-title>

    <div class="search">
      <!-- <div class="back" @click="goback"><i class="fa fa-angle-left"></i></div> -->
      <div class="search-box">
        <i ref="search_icon" class="iconfont icon-sousuo1" @click="searchArt"></i>
          <form @submit.prevent action="#" id="search-form">
          <input type="search" ref="search_input" placeholder="请输入文章标题/关键字" @keypress="enterSearch" v-model="searchText" />
        </form>
      </div>
      <!-- <div style="position: absolute; right: 1rem;">
        <i class="fa fa-th-large" v-show="view" @click="$store.commit('views')"></i>
        <i class="fa fa-th-list" v-show="!view" @click="$store.commit('views')"></i>
      </div> -->
    </div>

    <!-- 优化 -->
    <div class="content">
      <div class="tab_box">
        <ul class="tab_list">
          <van-tabs v-model="active" v-if="categories && (active || active == '0')" @click="onClick" id="tab" ref="act" title-active-color="#FE5E56" color="#FE5E56" :ellipsis="false">
            <van-tab title="全部" class="tabChild"></van-tab>
            <van-tab :title="item.name" v-for="(item, i) in categories" :key="i" class="tabChild"></van-tab>
          </van-tabs>
        </ul>
      </div>
      <ul class="new_box">
        <li class="new_list" v-for="(item, i) in datas" :key="i" @click="toNoticeInfo(item)">
          <div class="miain">
            <div class="title">
              <div class="title_a" style="-webkit-box-orient: vertical;">
                <span class="pay-money" v-if="item.has_one_article_pay">付费</span>
                <span class="new-title">{{ item.title }}</span>
              </div>
              <div class="title_b" v-if="!item.type">
                <span class="sort">{{ item.author }}</span>
                <span class="time">{{ fun.isTextEmpty(item.virtual_at) ? item.updated_at : item.virtual_at }}</span>
              </div>
              <div class="title_v" v-else>
                  <div class="time">
                    <span>播放{{ item.virtual_audio_views }}次</span>
                    <span style="margin-left: 0.5625rem;">{{ item.audio_seconds }}</span>
                  </div>
                  <!-- <div class="audioViews">
                    <i class="iconfont icon-seller-time"></i>
                  </div> -->
                <div class="audioShare" @click.stop="shareTap(item)">
                  <i class="iconfont icon-zb_all_share"></i>
                  <span>分享</span>
                </div>
              </div>
              <audio
                :id="'audio' + i"
                :ref="'audio' + i"
                @pause="onPause(i)"
                @play="onPlay(i)"
                @timeupdate="onTimeupdate($event,i)"
                @loadedmetadata="onLoadedmetadata($event,i)"
                @ended="endedMethod"
                controls="controls"
                style="display: none;"
                :src="item.audio_link"
              >
                您的浏览器不支持 audio 标签！
              </audio>
            </div>
            <div class="img" v-if="item.thumb">
              <div class="posimg" v-if="item.type == 1" @click.stop="startPlayOrPause(item, i)">
                <van-icon name="pause" v-if="item.playStatus" @click.stop="pause(i)" />
                <van-icon name="play" v-else @click.stop="startPlayOrPause(item, i)"/>
              </div>
              <img :src="item.thumb" />
            </div>
            <div class="img" v-if="!item.thumb">
              <div class="posimg" v-if="item.type == 1" @click.stop="startPlayOrPause(item, i)">
                <van-icon name="pause" v-if="item.playStatus" @click.stop="pause(i)" />
                <van-icon name="play" v-else @click.stop="startPlayOrPause(item, i)"/>
              </div>
              <img src="../../assets/images/img_default.png" />
            </div>
          </div>
          <!-- <div class="slider" :ref="'slider' + i" v-if="item.type == 1 && i == playInd" @touchstart="handleTouchStart">
            <div class="slider-track"></div>
            <div class="slider-fill" :style="'width:' + sliderTime + '%'"></div>
            <div class="slider-thumb" :style="'left:' + sliderTime + '%'"></div>
          </div> -->
          <!-- <div class="slider" v-if="item.type == 1 && sliderShow && i == playInd"> -->
          <div class="slider" v-if="false">
            <div class="sliderBox">
              <van-slider @input='handleTouchStart($event,i)' v-model="sliderTime" bar-height="6px" active-color="#f3a5a5" inactive-color="#f5f5f5" v-if="item.type == 1 && i == playInd" >
                <template #button>
                  <div class="custom-button"></div>
                </template>
              </van-slider>
            </div>
            <div class="iconclose" @click.stop="tapClose">
              <i class="iconfont icon-close11"></i>
            </div>
          </div>
        </li>
      </ul>
      <p v-if="noNotice" class="noNotice">该分类下暂无数据</p>
    </div>
    <div class="video-popup" v-if="video_info&&show_video_popup" :class="{'w375': fun.isPc()}">
      <img :src="video_info.thumb" alt="" style="width: 3.125rem;border-radius: 0.375rem;margin: 0 0.5rem 0 0 ;"/>
      <div style="display: flex;flex-direction: column;width: 12.625rem;">
        <div class="audio-title" >{{ video_info.title }}</div>
        <div style="flex:1;display: flex;align-items: center;justify-content: space-around;">
            <div class="time_left">{{currentTime | formatSecond }}</div>
            <div class="slider" >
              <div class="sliderBox">
                <van-slider @input='handleTouchStart($event,playInd)' v-model="sliderTime" bar-height="6px" active-color="#3B3B4A" inactive-color="#D6D6DC">
                  <template #button>
                    <div class="custom-button"></div>
                  </template>
                </van-slider>
              </div>
            </div>
            <div class="time_right" style="margin-left: 0.3125rem;">{{ video_info.audio_seconds }}</div>
          </div>
      </div>
      <div class="audio-left" @click.stop="startPlayOrPause(video_info,playInd)">
        <i  v-if="isPlay " @click.stop="startPlayOrPause(video_info,playInd)" class="iconfont icon-play"></i>
        <i v-if="!isPlay "  @click.stop="pause(playInd)" class="iconfont  icon-pause"></i>
      </div>
      <div class="close" @click="show_video_popup=false">
        <i class="iconfont icon-course_close"></i>
      </div>
    </div>
    <div class="btn" @click="toEssay" v-if="article_pay">
      <i class="iconfont icon-fontclass-shenhe1"></i>
    </div>
  </div>
</template>
<script>
import noticecontroller from "./notice_controller";

export default noticecontroller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.close{
  margin-left: 0.9688rem;
  .iconfont{
    color: #D6D6DC;
    font-size: 0.7813rem;
  }
}
  .audio-left {
    text-align: center;
    flex-shrink: 0;
    width: 1.9375rem;
    height: 1.9375rem;
    line-height: 1.9375rem;
    margin-left: 0.5313rem;
    border-radius: 100%;
    border: 1px solid #AAAAB3;
  }
.audio-title{
  font-size: 0.8125rem;font-weight: 500;color:#00001C;overflow: hidden;text-overflow: ellipsis;text-align: left;
}
::v-deep .van-tabs__line{
  bottom: 20px;

}
.w375{
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.video-popup{
  display: flex;
  align-items: center;
  position: fixed;
  width: 21.9375rem;
  height: 3.4375rem;
  border-radius: 0.5rem;
  background-color: #fff;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 8%;
  padding: 0.5rem;
  box-sizing: border-box;
}
.slider {
  width: 100%;
  // margin-top: 0.625rem;
  margin-left: 0.1875rem;
  margin-right: 0.1875rem;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  outline: none;

  .sliderBox {
    flex: 1;
  }

  .iconclose {
    margin-left: 0.9375rem;
    flex-shrink: 0;
  }
}

.custom-button {
  width: 13px;
  height: 13px;
  color: #fff;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.16);
  border-radius: 100px;
}

#notice {
  padding-bottom: 3.1rem;

  .content {
    .tab_box {
      background: #fff;
      position: relative;

      .tab_list {
        height: 44px;
        line-height: 44px;
        border-bottom: solid 1px #ebebeb;
        // overflow-x: scroll;
        overflow-x: hidden;
        overflow-y: hidden;
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        transition-duration: 300ms;
        font-size: 18px;
      }
    }

    .new_box {
      padding: 0 0.75rem;

      .new_list {
        padding: 0.625rem;
        margin: 0.625rem 0;
        background-color: #fff;
        border-radius: 0.5rem;

        .miain {
          display: flex;
          position: relative;
          justify-content: space-between;
        }

        .title {
          width: 13.5625rem;
          text-align: left;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title_a {
            font-size: 0.9375rem;
            line-height: 1.2rem;
            color: #00001C;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            .new-title{
                font-size: 0.9375rem;
                color: #00001C;
                font-weight: 500;
            }

            .pay-money {
              display: inline-block;
              width: 1.75rem;
              height: 1rem;
              line-height: 1rem;
              border-radius: 0.25rem;
              background-color: #F69A30;
              text-align: center;
              font-size: 0.625rem;
              color: #fff;
              margin-right: 0.3125rem;
            }
          }

          .title_v {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #867e7e;
            font-size: 0.3125rem;

            .audioViews,
            .audioShare {
              display: flex;
              align-items: center;
              margin-right: 0.325rem;
              color: #3B3B4A;
              font-size: 0.6875rem;
            }
            .icon-zb_all_share{
              color:#3B3B4A;
              font-size: 0.9375rem;
            }

            .time {
              display: flex;
              align-items: center;
              margin-right: 0.325rem;
              line-height: 22px;
              font-size: 0.6875rem;
              color: #AAAAB3;
            }


            .icon-seller-time {
              font-size: 1.1rem;
              margin-top: 1px;
            }

            .icon-fontclass-bofang1 {
              font-size: 0.7rem;
            }
          }

          .title_b {
            font-size: 0.6875rem;
            color: #AAAAB3;
            display: flex;
            align-items: center;

            .sort {
              text-overflow: ellipsis;
              overflow: hidden;
              // width: 8rem;
              margin-right: 0.7813rem;
              white-space: nowrap;
            }
          }
        }

        .img {
          width: 6.125rem;
          height: auto;
          background: #f2f2f2;
          overflow: hidden;
          background-size: cover;
          position: relative;

          .posimg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .van-icon-play,
            .van-icon-pause {
              font-size: 2.5rem;
              color: rgba(255, 255, 255, 86);
            }
          }

          img {
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
          }
        }
      }
    }
  }
  // .banner {
  //   height: auto;
  //   max-height: 25rem;
  //   width: 100%;
  // }
  // .item {
  //   margin: 0.3125rem;
  // }
  // .item_lin {
  //   height: 1.875rem;
  //   background: #fff;
  // }
  // .item_bg {
  //   border: 0.0625rem solid #ebebeb;
  //   padding: 0.3125rem;
  //   background: #fff;
  //   width: 100%;
  //   border-radius: 0px;
  // }

  // .item_img_bg {
  //   width: 100%;
  //   margin-bottom: 0.625rem;
  //   padding-top: 0.3125rem;
  //   padding-bottom: 0.3125rem;
  // }
  // .item_img {
  //   width: 100%;
  //   max-height: 25rem;
  // }
  // p.item_title {
  //   padding-left: 0.3125rem;
  //   padding-right: 0.3125rem;
  //   text-align: left;
  //   height: 1.875rem;
  //   line-height: 1.875rem;
  //   font-size: 15px;
  //   overflow: hidden;
  //   white-space: nowrap;
  //   text-overflow: ellipsis;
  //   font-weight: bold;
  // }
  // p.item_time {
  //   width: 50%;
  //   float: left;
  //   padding-left: 0.3125rem;
  //   padding-right: 0.3125rem;
  //   text-align: left;
  //   height: 1.875rem;
  //   line-height: 1.875rem;
  //   font-size: 12px;
  //   color: #8a8a8a;
  // }
  // p.item_category {
  //   width: 50%;
  //   float: left;
  //   padding-left: 0.3125rem;
  //   padding-right: 0.3125rem;
  //   text-align: right;
  //   height: 1.875rem;
  //   line-height: 1.875rem;
  //   font-size: 14px;
  //   color: #f15353;
  //   font-weight: bold;
  // }
  // .item_desc {
  //   padding-left: 0.3125rem;
  //   padding-right: 0.3125rem;
  //   text-align: left;
  //   font-size: 14px;
  //   color: #8a8a8a;
  // }
  .noNotice {
    padding: 20px 0;
  }

  .btn {
    width: 2.75rem;
    height: 2.75rem;
    line-height: 2.75rem;
    background-color: rgba(0,0,0,0.7);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    position: fixed;
    right: 1rem;
    bottom: 18%;
    border-radius: 50%;
    padding: 0 0.5rem;

    i {
      font-size: 1.4063rem;
    }
  }
}

.search {
  height: 2.875rem;
  line-height: 2.875rem;
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: #fff;

  .back {
    width: 2.8125rem;

    i {
      line-height: 2.875rem;
      font-size: 1.5rem;
    }
  }

  .search-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 21.9375rem;
    margin-top: 0.5rem;
    padding: 0 0.625rem;
    background-color: #f2f2f2;
    height: 1.75rem;
    line-height: 1.75rem;
    border-radius: 1.0938rem;

    #search-form {
      flex: 1;
      margin-right: 0.5rem;
    }

    input {
      width: 100%;
      line-height: 1.75rem;
      border: none;
      color: #333;
    }
    input::-webkit-input-placeholder{
      color:#999;
      font-size: 0.75rem;
    }

    i {
      flex: 0 0 1.5rem;
      color:#999;
    }
  }
}

.search::after {
  height: 1px;
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  background-image: linear-gradient(0deg, #f5f5f5 50%, transparent 0);
}
</style>
